<template>
  <div class="container">

    <div style="margin-top: 15px; width:500px">
      <el-input v-model="searchStr" placeholder="请输入搜索内容" class="input-with-select">
        <el-select slot="prepend" v-model="searchSelect" placeholder="请选择" style="width:120px">
          <el-option label="全部" value="0" />
          <el-option label="用户名" value="1" />
          <el-option label="邮箱" value="2" />
          <el-option label="用户电话" value="3" />
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="search" />
      </el-input>
    </div>
    <el-button type="warning" style="float:left; margin-top:10px" @click="handeleOutExportExcel">导出</el-button>
    <el-table
      :data="showUserList"
      style="width: 100%"
    >
      <el-table-column
        prop="id"
        label="id"
        sortable
        width="80"
      />
      <el-table-column
        prop="username"
        label="用户名"
      />
      <el-table-column
        label="邮箱"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.email ? scope.row.email:'暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.phone ? scope.row.phone:'暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.gender === true">男</span>
          <span v-else>女</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
      >
        <template slot-scope="scope">
          <!-- <span>{{ scope.row.email ? scope.row.email:'暂无' }}</span> -->
          <el-tag v-if="scope.row.enable === 1">启用</el-tag>
          <el-tag v-else type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button> -->
          <el-button
            size="mini"
            type="primary"
            @click="handleEnabled(scope.$index, scope.row)"
          >启用</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDisabled(scope.$index, scope.row)"
          >禁用</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
import * as admin from '@/api/user'
import { outExportExcel } from '@/api/exportData.js'
export default {
  data() {
    return {
      showUserList: [],
      userList: [],
      searchSelect: '0',
      searchStr: ''
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    search() {
      // console.log(this.searchSelect)
      // console.log(this.searchStr)
      if (this.checkSearch()) {
        this.doSearch(this.searchSelect, this.searchStr)
      } else {
        this.$message.warning('请输入搜索内容')
      }
    },
    checkSearch() {
      if (this.searchStr && this.searchSelect) {
        return true
      } else if (this.searchSelect === '0') {
        return true
      } else {
        return false
      }
    },
    doSearch(type, str) {
      let arr = []
      if (type === '0') {
        this.showUserList = this.userList
        return
      } else if (type === '1') {
        // 搜索用户名
        arr = this.userList.filter(element => {
          if (element.username.includes(str)) {
            // console.log('sssss')
            return true
          }
        })
        console.log(arr)
      } else if (type === '2') {
        // 搜索邮箱
        arr = this.userList.filter(element => {
          if (!element.email) {
            return false
          } else if (element.email.includes(str)) {
            return true
          }
        })
      } else if (type === '3') {
        // 搜索手机号
        arr = this.userList.filter(element => {
          if (!element.phone) {
            return false
          } else if (element.phone.includes(str)) {
            return true
          }
        })
      }
      this.showUserList = arr
      // console.log(this.showUserList)
    },
    getUser() {
      admin.getUserList().then(res => {
        // console.log(res)
        this.userList = res.object
        // console.log(res.object)
        this.showUserList = res.object
      })
    },
    handleEdit() {

    },
    handleEnabled(index, obj) {
      if (this.showUserList[index].enable === 1) {
        this.$message.warning('当前已是启用状态')
      } else {
        const userQo = {
          id: obj.id,
          enable: 1
        }
        admin.setUserStatus(userQo).then(res => {
          this.showUserList[index].enable = 1
          this.$message.success('操作成功')
          this.userList.forEach(element => {
            if (element.id === obj.id) {
              element.enable = 1
            }
          })
        }).catch(() => {

        })
      }
    },
    handleDisabled(index, obj) {
      if (this.showUserList[index].enable === 0) {
        this.$message.warning('当前已是禁用状态')
      } else {
        const userQo = {
          id: obj.id,
          enable: 0
        }
        admin.setUserStatus(userQo).then(res => {
          this.showUserList[index].enable = 0
          this.$message.success('操作成功')
          this.userList.forEach(element => {
            if (element.id === obj.id) {
              element.enable = 0
            }
          })
        }).catch(() => {

        })
      }
    },
    handeleOutExportExcel() {
      const tableHeader = ['ID', '用户名', '邮箱', '手机号', '状态']
      const tableKey = ['id', 'username', 'email', 'phone', 'enable']
      outExportExcel(
        tableHeader,
        tableKey,
        this.userList
      )
    }
  }
}
</script>

<style scoped lang='scss'>
.container{
  padding: 20px 80px;
}
//  .el-select .el-input {
//     width: 130px;
//   }
//   .input-with-select .el-input-group__prepend {
//     background-color: #fff;
//   }
</style>
